昨天有與各位分享到 Vue Cli 的安裝與打開方法，那今天我們就來看看檔案架構吧！
首先，打開我們的 Vue Cli ，可以看到打包的所有檔案是長這樣

那麼我們今天就針對這些檔案分別與各位介紹 Vue Cli 的檔案架構喔！

package.json

在打開檔案後，可以看見印入眼簾的是 package.json 這隻檔案，此檔案是使用了 npm 的管理套件，所以也跟者一併出現，裡面是紀錄著此專案將會使用的套件，及 npm 的執行指令。而 package.json 裡也預設安裝了 webpack、babel、postcss、vue-loader 或 uglifyjs-webpack-plugin 這些 webpack 的套件。

而在 package.json 裡有一個 script 的地方可以設定指令，Vue 的預設專案已有三個指令，在執行時使用 npm run 加上設定的指令即可以使用。

• npm run dev - 利用 webpack-dev-server 開啟本地端 server
• npm run start - 執行 npm run dev
• npm run build - 打包專案後產生 dist 資料夾，靜態檔案可直接部屬至雲端 server
  

在 npm install 的同時也安裝了 node_modules 資料夾，裡面將存放著已安裝好的套件。

src

src 這個資料夾就是我們主要開發的地方，那我們就來一一介紹一下吧

• assets 資料夾：專門用來存放專案的靜態檔案，裡面可以存放圖片或 CSS 等靜態的檔案
• components：可以在此存放 .vue 的 components 元件。
• app.vue：是 vue 的根結點元件，可透過 template 去引用其他的components。
• main.js：是整個專案的入口檔案，也就是 webpack 所打包的入口檔。可以初始化 vue 應用程式決定要將應用掛載至 index.html 檔案中的哪一個 html 元素。
  
  而可以看到程式碼中透過 import App from './App.vue' 去引入 app.vue 這隻檔案。需要使用到 .vue 檔時都要先 import。

App.vue

app.vue 是專案的入口頁面，而.vue 檔通常分成三部分：<template>、<script>、<style>，分別包含了元件模板、指令碼與樣式資訊，需要經過 webpack 等其他工具去編譯成 JavaScript 方可以使用。也由於 Vue-cli 主要是用來開發大型的應用程式，所以當有結構變複雜時，就不適合在同一檔案裡定義或引用組元件，因此 Vue-cli 就需要獨立出來變成單一的 .vue 檔。

• <template>：包含了標記結構及元件的呈現邏輯，而在 template 模板中可以包含任何有效的 HTML，及某些 Vue 的特定語法。但如要在 template 的標籤上設定 lang 的屬性。例如：<template lang="pug">，就可以使用 Pug 的樣板語法去取代標準的 HTML。

• <script>：包含了元件中不會顯示的邏輯，在標籤中有一個 JavaScript 的物件。而此物件是我們在本地端所註冊的元件，包含了定義屬性、處理本地狀態、定義方法 ... 等等。而在建置的時候，我們的物件將被處理及轉換，變成一個含有 render() 函數的 Vue 元件。
  
  可以看到上圖的範例，我們將元件的 name 設定為 App，並且在 components 的屬性中加入 HelloWorld 來註冊此元件，而此種的註冊方式是本地註冊，那本地註冊的元件只能在有註冊他們的元件中使用，所以如有需要使用的話，需要在使用他們的元件檔裡匯入並且註冊。
  
  而如果需要使用 TypeScript 的語法時，可以在 script 標籤的 lang 屬性設定成 <script lang="ts">，如上圖所示，這樣就可以編譯成 TypeScript 囉！

• <style>：撰寫 CSS 的所在地，如果我們在標籤中加上 scoped 的屬性，例如 <style scoped>，Vue 就會把樣式的範圍限制在此單一檔案中。
  
  但如果我們在 Cli 創建專案時有選擇 CSS 預處理器，那我們在 style 標籤中加上 lang 屬性的話，那麼 Webpack 就可以在建置的時候處理這些內容，如上圖，<style lang="scss">，這樣我們就可以在樣式中使用 SCSS 的語法。

main.js

main.js 是我們整個項目的核心，他可以初始化 Vue 的應用程式，並且選擇要將我們的哪個 html 元素掛載到 index 檔案中，除此之外，也會在 main.js 此檔案內去註冊全域性的原件或載入其他的 Vue 函式庫。

如上圖，.mount('#app') 是掛載在 /public/index.html 的裡面，如果我們把 index.html 打開來看，可以看到如下圖：

裡面的 <div id="app"></div> 就是我們想要 Vue 去實體掛載的目標。當我們透過 npm run serve 啟動專案時，預設是讓我們從 index.html 這裡進入應用程式的，而我們剛剛看到的 main.js 裡出現的 app.vue 檔案就是我們的根元件。

除此之外，我們也不需要再 index.html 檔案中新增 <script src="...">來引入 vue 和 JavaScript 的檔案，在我們啟動伺服器時，Vue CLI 會幫我們把相對應的 JavaScript、CSS 等檔案加入我們的網頁裡。

dist

dist 是我們在最初創建好 Vue Cli 時，看不到的資料夾，就像這樣：

大家一定覺得很奇怪吧，既然沒有的話，那為什麼我們要特別拿出來說呢？因為 dist 也是在 Vue Cli 中值得被拿出來一提的呦！那接下來就讓我來為各位介紹介紹吧。

首先，最重要的就是要先讓 dist 此資料夾出現，要怎麼做呢？就是打包他！而所謂的打包呢，是透過我們終端機輸入指令：npm run build：

讓 webpack 去編譯，最後輸出 HTML、CSS 和 JavaScript 的檔案，並放在 dist 資料夾

而它的功用呢，就是幫我們的靜態應用程式部署，舉個例子給各位，假如今天我們的專案只是用來串接公共 API 的話，就只需要將 dist 資料夾部署到 GitHub Pages、Netlify 等靜態網頁的託管服務上。但如果是需要將專案與後端程式做串接，就需要把 dist 資料夾放到後端的伺服器資料夾中，並更改路由成指向 dist 資料中的 index.html 位置，接者再由後端進行部屬。

vue.config.js

是我們整個專案的設定檔。

為了能讓開發者更方便，讓我們在建立好 Vue CLI 的時候，就能馬上投入專案的開發，所以採取的是零配置的設定政策。但其實我們在實際開發的時候，會因應各式各樣的場景去設定適合自己的開發模式，比如說我們如果想要設定 webpack 的參數時，就必須要自行建立 vue.config.js 的檔案。

跟各位補充一下！如果我們不希望打包後的檔案名稱出現雜湊值，就可在我們的設定檔中加入指令：filenameHashing: false

就像這樣！重新存檔後，重新執行打包指令：npm run build，這樣我們的檔名就不再是帶有亂數的雜湊值囉 ~

public

包含了 index.html 和 favicon 兩個檔案。

index.html

index.html 是首頁的 html 檔，並不會有專案的主要內容，可在此編輯網頁所需要的 meta tag 或是引入外部的 css 或 JavaScript。同時也是 Vue 元件生成後所要掛載的實體檔案區，Webpack 會將最終打包好並編譯檔案放入此地。

README.md

純文字檔的說明文件，告訴開發者 Vue Cli 是如何運作的。

package-lock.json

告訴開發者此專案所使用到的所有套件

.gitignore

根據 gitignore 檔案的配置忽略掉特定的檔案，並不被紀錄。但如果是被 git 追蹤的檔案再次放入 gitignore 裡的話，就不會生效！

那今天我們對於 Vue Cli 的檔案講解就到這裡結束拉 ~　
如果大家有甚麼不懂或是需要補充的，歡迎下面留言告訴我
明天就會進入 Vue 的生命週期與 Component 元件的介紹囉！